<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./bulma.css">
  <script src="./vue.js"></script>
</head>
<body>
  <!-- start：hero组件 -->
  <template id="hero">
    <section class="hero is-dark">
      <div class="hero-body">
        <div class="container">
          <h1 class="title">
            待办事项列表
          </h1>
          <h2 class="subtitle">
            今天的事情今天做，明天才有时间做更多的事情
          </h2>
        </div>
      </div>
    </section>
  </template>
  <!-- end：hero组件 -->

  <!-- start：todoForm组件 -->
  <template id="todo-form">
    <div class="container is-widescreen" style="margin: 30px auto;">
      <div class="columns">
        <div class="column is-one-quarter">
          <input
            ref="addInput"
            type="text"
            placeholder="输入代办事项名称"
            class="input"
            v-model="inputValue"
            @keyup.13="addTodo"
          >
        </div>
        <div class="column is-one-quarter">
          <button class="button is-primary" @click="addTodo">添加</button>
        </div>
      </div>
    </div>
  </template>
  <!-- end：todoForm组件 -->

  <!-- start：todoCard组件 -->
  <template id="todo-card">
    <div class="column is-one-quarter">
      <div class="card">
        <header class="card-header">
          <p class="card-header-title">
            代办事项
          </p>
          <a href="#" class="card-header-icon" aria-label="more options">
            <button class="delete" @click="removeTodo"></button>
          </a>
        </header>
        <div class="card-content">
          <div class="content">
            {{title}}
          </div>
        </div>
        <footer class="card-footer">
          <a
            href="javascript:;"
            :class="['card-footer-item', hasFinished ? 'has-text-success' : 'has-text-danger']"
          >
            {{ hasFinished ? '已完成' : '未完成' }}
          </a>
          <a href="javascript:;" class="card-footer-item" @click="toggleHasFinished">
            切换为{{ hasFinished ? '未' : '已' }}完成
          </a>
        </footer>
      </div>
    </div>
  </template>
  <!-- end：todoCard组件 -->

  <div id="app">
    <hero></hero>
    <todo-form @add-todo="addTodo"></todo-form>
    <div class="container is-widescreen">
      <nav class="panel">
        <p class="panel-heading">
          已完成
        </p>
        <div class="panel-block columns is-multiline">
          <todo-card
            v-for="todo in hasFinishedTodos"
            :key="todo.id"
            :id="todo.id"
            :title="todo.title"
            :has-finished="todo.hasFinished"
            @toggle-has-finished="toggleHasFinished"
            @remove-todo="removeTodo"
          >
          </todo-card>
        </div>
      </nav>
      <nav class="panel">
        <p class="panel-heading">
          未完成
        </p>
        <div class="panel-block columns is-multiline">
          <todo-card
            v-for="todo in unFinishedTodos"
            :key="todo.id"
            :id="todo.id"
            :title="todo.title"
            :has-finished="todo.hasFinished"
            @toggle-has-finished="toggleHasFinished"
            @remove-todo="removeTodo"
          >
          </todo-card>
        </div>
      </nav>
    </div>
  </div>
  <script>
    const hero = {
      template: '#hero'
    }
    const todoForm = {
      template: '#todo-form',
      data () {
        return {
          inputValue: ''
        }
      },
      methods: {
        addTodo () {
          if (this.inputValue === '') return
          this.$emit('add-todo', { title: this.inputValue })
          this.inputValue = ''
          this.$refs.addInput.focus()
        }
      }
    }

    const todoCard = {
      template : '#todo-card',
      props: {
        id: {
          type: Number,
          required: true
        },
        title: {
          type: String,
          required: true
        },
        hasFinished: {
          type: Boolean,
          default: false
        }
      },
      methods: {
        toggleHasFinished () {
          // 告诉父组件去修改
          this.$emit('toggle-has-finished', { id: this.id })
        },
        removeTodo () {
          // 告诉父组件去删除
          this.$emit('remove-todo', { id: this.id })
        }
      }
    }


    const app = new Vue({
      el: '#app',
      data: {
        todos: [
          {
            id: 1,
            title: '吃饭',
            hasFinished: true
          },
          {
            id: 2,
            title: '睡觉',
            hasFinished: false
          },
          {
            id: 3,
            title: '写代码',
            hasFinished: false
          }
        ]
      },
      components: {
        hero,
        todoForm,
        todoCard
      },
      computed: {
        hasFinishedTodos () {
          return this.todos.filter(todo => todo.hasFinished)
        },
        unFinishedTodos () {
          return this.todos.filter(todo => !todo.hasFinished)
        }
      },
      methods: {
        toggleHasFinished ({ id }) {
          this.todos = this.todos.map(todo => {
            if (todo.id === id) todo.hasFinished = !todo.hasFinished
            return todo
          })
        },
        removeTodo ({ id }) {
          // 咱们还是从所有todos里去删，computed计算出来的属性不会直接操作
          this.todos = this.todos.filter(todo => {
            return todo.id !== id
          })
        },
        addTodo ({ title }) {
          this.todos.push({
            id: Date.now(),
            title,
            hasFinished: false
          })
        }
      }
    })
  </script>
</body>
</html>
